<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/detail.css" />

		<!-- 图片放大镜css -->
		<link rel="stylesheet" type="text/css" href="css/magnifier.css" />

		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<!-- 头部 -->
		<div class="xf_header">
			<header>
				<a href="index.html">
					<img src="img/logo_big01.png" />
				</a>
				<div class="city">
					<img src="img/icon-address.png" />
					<span>武汉市</span>
					<a href="#">切换城市</a>
				</div>
				<div class="nav">
					<a href="#">全部</a>
					<a href="list.html">蛋糕</a>
					<a href="#">下午茶</a>
					<a href="#">手信</a>
					<a href="#">团购预约</a>
					<a href="about.html">关于我们</a>
				</div>
				<div class="link">
					<a href="#"> <img src="img/i-search.jpg" /></a>
					<a href="#"><img src="img/i-cart.jpg" /></a>
					<a href=login.html> <img src="img/i-user.jpg" /></a>
					<a href="#">联系我们</a>
				</div>
			</header>
		</div>
		<!-- 头部 end -->

		<!-- 商品详情 -->
		<div class="product-wrap">
			<div class="product-intro">
				<!-- 左侧商品预览 -->
				<div class="product-preview">
					<div class="magnifier" id="magnifier1">
						<div class="magnifier-container">
							<div class="images-cover"></div>
							<!--当前图片显示容器-->
							<div class="move-view"></div>
							<!--跟随鼠标移动的盒子-->
						</div>
						<div class="magnifier-assembly">
							<div class="magnifier-btn">
								<span class="magnifier-btn-left">&lt;</span>
								<span class="magnifier-btn-right">&gt;</span>
							</div>
							<!--按钮组-->
							<div class="magnifier-line">
								<ul class="clearfix animation03">
									<li>
										<div class="small-img">
											<img src="img/cake1_big.jpg"/>
										</div>
									</li>
									<li>
										<div class="small-img">
											<img src="img/cake1_s2.jpg" />
										</div>
									</li>
									<li>
										<div class="small-img">
											<img src="img/cake1_s3.jpg" />
										</div>
									</li>
								</ul>
							</div>
							<!--缩略图-->
						</div>
						<div class="magnifier-view"></div>
						<!--经过放大的图片显示容器-->
					</div>

				</div>
				<!-- 左侧商品预览 end -->

				<!-- 右侧商品描述 -->
				<div class="product-info">
					<div class="product-info-area">
						<div class="title">
							<p class="title-name">提拉米苏(约2磅)</p>
						</div>
						<div class="price">
							<div class="price-item">
								<span class="price-label" style="vertical-align:bottom;">售价</span>
								<div class="price-box">
									<span class="sell-price" id="sellPrice" style="opacity:1;">198</span>
									<div class="discount-tag-list"></div>
									<span class="original-price">市场价<span class="s-price"
											id="originalPrice">￥338</span></span>
								</div>
								<div class="sale-count">已售<span>6264</span>件</div>
							</div>
							<div class="price-time" style="display: none;">
								<span class="price-label">配送时间</span>
								<div class="price-time-group">
								</div>
							</div>
						</div>

						<div class="huayu">
							<div class="huayu-item">
								<span class="huayu-label">材料</span>
								<p class="huayu-content">鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪</p>
							</div>
							<div class="huayu-item">
								<span class="huayu-label">包装</span>
								<p class="huayu-content">一次性蛋糕用具1套</p>
							</div>
							<div class="huayu-item">
								<span class="huayu-label">备注</span>
								<p class="huayu-content">品牌：悦轩饼家<br></p>
							</div>
						</div>
						<div class="delivery">
							<div class="delivery-item delivery-range">
								<span class="delivery-label">配送说明</span>
								<div class="delivery-content delivery-range-detail" style="cursor: default;">
									<p>北京、上海、广州、深圳、天津、重庆、南京、长沙</p><span class="icon icon-arrow"
										style="display: none;"></span>
								</div>
							</div>
							<div id="deliItem" class="delivery-item delivery-addr" style="">
								<span class="delivery-label">配送至</span>
								<div class="delivery-content delivery-range-detail" style="cursor: default;">
									<p>郑州</p><span class="icon icon-arrow" style="display: none;"></span>
								</div>
							</div>
							<div class="delivery-item">
								<span class="delivery-label">说明</span>
								<p class="delivery-content delivery-content-remind"><span
										class="icon icon-remind"></span>深圳大鹏新区暂时不配送</p>
							</div>
							<div class="delivery-item sku-product" style="display: block;">
								<span class="delivery-label">选择</span>
								<div class="sku-list">
									<a href="javascript:void(0);">
										<div class="sku-box active">
											<span class="sku-name">2磅</span>
											<span class="icon icon-chosen"></span>
											<i class="sku-border-top"></i>
											<i class="sku-border-right"></i>
											<i class="sku-border-bottom"></i>
											<i class="sku-border-left"></i>
										</div>
									</a>
									<a href="javascript:void(0);">
										<div class="sku-box">
											<span class="sku-name">3磅</span>
											<span class="icon icon-chosen"></span>
											<i class="sku-border-top"></i>
											<i class="sku-border-right"></i>
											<i class="sku-border-bottom"></i>
											<i class="sku-border-left"></i>
										</div>
									</a>
									<a href="javascript:void(0);">
										<div class="sku-box">
											<span class="sku-name">4磅</span>
											<span class="icon icon-chosen"></span>
											<i class="sku-border-top"></i>
											<i class="sku-border-right"></i>
											<i class="sku-border-bottom"></i>
											<i class="sku-border-left"></i>
										</div>
									</a>
								</div>
							</div>
						</div>

						<div class="btn-group">
							<a href="cart1.html" class="btn-group-item btn-addcart">
								<span></span>加入购物车
							</a>
							<a href="purchase.html" class="btn-group-item btn-soonbuy">立即购买</a>
						</div>
					</div>

				</div>
				<!-- 右侧商品描述 end-->
			</div>
		</div>
		<!-- 商品详情 end -->

		<!--底部 -->
		<div class="xf_footer">
			<footer>
				<div class="footer1">
					<div class="msg">
						<a href="#">品牌动态</a>
						<a href="#">生产经营资质</a>
						<a href="#">企业合作</a>
						<a href="#">发票申请</a>
						<a href="#">平台规则</a>
						<a href="#">帮助服务</a>
						<a href="#">联系我们</a>
					</div>
					<div class="tel">
						<a href="#">
							<img src="img/tel_03.jpg" />
							<span>400-999-6665</span>
						</a>
						<a href="#">WEIBO</a>
						<a href="#">WECHAT</a>
						<a href="#">京东商城</a>
					</div>
				</div>
				<div class="footer2">
					<div class="copyright">
						<span>深圳市悦轩商城科技股份有限公司</span>
						<span>粤ICP备16039394号-6 </span>
						<span>京公网安备44030702002399</span>
						<span>公司地址：深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼</span>
					</div>
				</div>
			</footer>
		</div>
		<!--底部 end-->
	</body>

	<!-- 商品重量样式切换 -->
	<script type="text/javascript">
		$(".sku-box").click(function() {
			$(".sku-box").removeClass("active");
			$(this).addClass("active");
		})
	</script>
	<!-- 图片放大镜 -->
	<script src="js/magnifier.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {

			var magnifierConfig = {
				magnifier: "#magnifier1", //最外层的大容器
				width: 500, //承载容器宽
				height: 500, //承载容器高
				moveWidth: null, //如果设置了移动盒子的宽度，则不计算缩放比例
				zoom: 5 //缩放比例
			};

			var _magnifier = magnifier(magnifierConfig);

			/*magnifier的内置函数调用*/
			/*
			//设置magnifier函数的index属性
			_magnifier.setIndex(1);
	
			//重新载入主图,根据magnifier函数的index属性
			_magnifier.eqImg();
		*/
		});
	</script>
</html>
